<template>
  <div class="songsheet">
    <!--热门歌单标签 -->
    <van-tabs @click="listto">
      <van-tab v-for="v in tags" :title="v.name" :key="v.id">
        <p class="all">全部{{ v.name }}</p>
        <ul class="songsheets">
          <li v-for="v in playlists" :key="v.id" @click="listdetails(v.id)">
            <img :src="v.coverImgUrl" alt="" />
            <p class="pnam">{{ v.name }}</p>
            <span class="ofplay"
              ><van-icon name="play" />{{
                (v.playCount / 10000).toFixed(1) + "万"
              }}</span
            >
          </li>
        </ul>
      </van-tab>
      <span></span>
    </van-tabs>
  </div>
</template>

<script>
import { playlistAPI, playListAP } from "../../api/home";
export default {
  data() {
    return {
      tags: [],
      playlists: [],
    };
  },

  components: {},
  computed: {},
  watch: {},
  created() {
    this.playlisto();
    this.listto();
  },
  mounted() {},
  methods: {
    //精品歌单列表
    //先拿到分类列表
    async playlisto() {
      const result = await playlistAPI();
      console.log(result);
      this.tags = result.tags;
    },
    //在拿分类列表的歌单
    async listto(name = 0, title = "华语") {
      console.log(name, title);
      const result = await playListAP(title);
      console.log(result);
      this.playlists = result.playlists;
      console.log(this.playlists);
    },
    //获取歌单详情
    listdetails(id) {
      this.$router.push(`/songlistdetail/${id}`);
    },
    //  组件激活
    activated() {
      // 全局事件总线
      this.$bus.$emit("settitle", this.$route.meta.title);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.all {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 18px;
}
.songsheet {
  width: 100%;
}
.songsheets {
  width: 100%;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
  margin-top: 10px;
}
.songsheets li {
  display: inline-block;
  width: 30%;
  margin: 10px 5px 0;

  padding-bottom: 10px;
  position: relative;
  /* background-color: rgba(85, 83, 84, 0.192); */
  border-radius: 30px;
}
.songsheets li p {
  height: 34px;
}
.songsheets img {
  width: 100%;
  border-radius: 15px;
  border: 1px solid #ccc;
}
.pnam {
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  margin-top: 3px;
}
.ofplay {
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 8px 2px 4px;
  background-color: rgba(0, 0, 0, 0.329);
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 3px;
  right: 2px;
  font-size: 14px;
}
</style>
